import React,{ useState,useEffect } from 'react'
import { LeftOutline,AudioOutline } from 'antd-mobile-icons'
import { useNavigate } from 'react-router-dom'
import { Uploader, Steps, Step   } from '@nutui/nutui-react';
import { Button, Modal } from 'antd';
import axios from '../axios/axios'
import './illness.css'
export default function Illness() {
    let navigate = useNavigate()
    const [val, setVal] = useState(1)
    let [transcript,setTranscript]=useState('')
    let [recognition,setRecognition]=useState(null) 
    let [userlist, setUserlist]=useState([])
    let [img,setImg]=useState('')
    let [name,setname]=useState('')
    let [sex,setsex]=useState('')
    let [age,setage]=useState('')
    let [shen, setshen]=useState('')
    let [isModalOpen, setIsModalOpen] = useState(false);
    let [idx, setIdx]=useState('')
    let [list, setList]=useState([
      {id:1,cname:'是'},
      {id:2,cname:'否'}
    ])
    let [idc, setIdc]=useState('')
    useEffect(()=>{
      getUserlist()
      const SpeechRecognition=window.SpeechRecognition ||  window.webkitSpeechRecognition
      const recognition = new SpeechRecognition()
      setRecognition(recognition)

      recognition.lang='zh-CN' //设置语言为中文（中国大陆）
      recognition.interimResults = false //是否获取中间结果

      recognition.addEventListener('result',e=>{
          console.log(e.results[0][0].transcript)
          setTranscript(e.results[0][0].transcript)
      })
      return ()=>{
          recognition.stop()
      }
  },[])
  const startListening = () =>{
    recognition.start()    
  }
  //   const stopListening =()=>{
  //       recognition.stop()
  // }
  const next = (val) => {
    setVal(val + 1)
  }
  const go=(val)=>{
    setVal(val-1)
  }

  const uploadUrl = "http://127.0.0.1:3000/uploadImg"
  const onSuccess = (file) => {
    setImg(JSON.parse(file.responseText).imgUrl)
  }

  const showModal = () => {
    setIsModalOpen(true);
  };

  const handleOk = async() => {
    let res=await axios.post('/addUserlist',{name,sex,age,shen})
    if(res.data.code==200){
      getUserlist()
    }
    setIsModalOpen(false);
  };

  const handleCancel = () => {
    setIsModalOpen(false);
  };

  let getUserlist=async()=>{
    let res=await axios.get('/userlist')
    setUserlist(res.data)
  }
  return (
    <div>
      {
        val==1?<div>
        <div className='header1'>
            <LeftOutline onClick={()=>{navigate('/home')}}/>
        </div>
        <div>
          <Steps value={val} style={{color:'blue'}}>
            <Step value={1} title="请描述您的病情" />
            <Step value={2} title="咨询人选择" />
          </Steps>
        </div>
        <div className='content'>
          <div className='box'>
            <textarea value={transcript} placeholder='为了更好的获得医生帮助，请尽可能详细描述病情' onChange={(e)=>{setTranscript(e.target.value)}} style={{width:'100%',height:'200px',borderRadius: '10px'}}></textarea>
              <AudioOutline className='icon' onClick={startListening} />
              {/* <button onClick={stopListening} style={{float:'right'}}>停止录音</button> */}
          </div>
          <div className='box1'>
            <div className='upload'>
              <span style={{fontWeight:'bold'}}>上传检查报告或患处照片</span>
              <span style={{color:'#ccc'}}>0/9</span>
            </div>
            <div className='upload'>
              <span style={{fontSize:'10px',color:'#ccc'}}>照片仅自己和医生可见</span>
              <span style={{fontSize:'10px',color:'#ccc'}}>已上传</span>
            </div>
            <div>            
            <Uploader
              url={uploadUrl}
              onSuccess={onSuccess}
              style={{
                marginInlineEnd: '10px',
                marginBottom: '10px',
              }}
              onChange={(v) => {
                console.log('outer onChange', v)
              }}
            />
            </div>
              <button className='btn' onClick={()=>{next(val)}}>下一步</button>
          </div>
        </div>
        </div>:''
      }
      {
        val==2?<div>
            <div className='header1'>
                <LeftOutline onClick={()=>{go(val)}}/>
            </div>
            <div>
              <Steps value={val} style={{color:'blue'}}>
                <Step value={1} title="请描述您的病情" />
                <Step value={2} title="咨询人选择" />
              </Steps>
            </div>
            <div className='text'>
              <div>咨询患者：</div>
              <div className='zi'>
                  {
                      userlist.map(item=>{
                     return <div key={item._id} className={item._id==idx?'active':'text_item'} onClick={()=>{setIdx(item._id)}} >
                              <h3 style={{paddingTop:'10px',marginLeft:'10px'}}>{item.name}</h3>
                              <div style={{marginLeft:'10px',color:'#ccc'}}>
                                <span >{item.sex}</span>|
                                <span>{item.age}岁</span>
                              </div>

                        </div>
                      })
                  }         
                  <button className='jia' onClick={showModal}>+</button>
              </div>
            
              <Modal title="添加患者" open={isModalOpen} onOk={handleOk} onCancel={handleCancel}>
                  <div>
                    <span>姓名：</span>
                    <input type='text' value={name} placeholder='请输入患者姓名' onChange={(e)=>{setname(e.target.value)}}></input>
                  </div>
                  <div>
                    <span>年龄：</span>
                    <input type='text' value={age} placeholder='请输入患者年龄' onChange={(e)=>{setage(e.target.value)}}></input>
                  </div>
                  <div>
                    <span>性别：</span>
                    <input type='radio' name='sex' value='男' onChange={(e)=>{setsex(e.target.value)}} defaultChecked={true} style={{marginLeft:'10px'}}></input><span>男</span>
                    <input type='radio' name='sex' value='女'  onChange={(e)=>{setsex(e.target.value)}} style={{marginLeft:'10px'}}></input><span>女</span>
                  </div>
                  <div>
                    <span>身份证号：</span>
                    <input type='text' value={shen}  placeholder='请输入患者身份证号' onChange={(e)=>{setshen(e.target.value)}}></input>
                  </div>
              </Modal>
              <div className='text3'>
                  <div>是否就该疾病到医院就诊过:</div>
                  {
                    list.map(item=>{
                      return <div key={item.id} className={item.id==idc?'active1':'text3_item'} onClick={()=>{setIdc(item.id)}}>
                        <span>{item.cname}</span>
                      </div>
                    })
                  }
              </div>
              <div>
                <p style={{textAlign:'center'}}>点击立即咨询即同意<span style={{color:'blue'}}>《病例隐私协议》</span>，家医签署</p>
                <button className='btn1'>立即咨询</button>
              </div>
            </div>
        </div>:''
      }
    </div>
  )
}
